<template>
  <el-dialog
    title=""
    :visible.sync="visible"
    width="800px"
    append-to-body
  >
    <table
      class="printTable"
      border="1"
      id="printMe"
      cellspacing="0"
      width="100%"
      height="800px"
    >
      <caption align="top" style="margin-bottom: 30px; font-size: 24px">
        {{
          form.unitTypeName === "施工单位"
            ? "重庆高新开发建设投资集团有限公司非公招项目施工单位抽选结果表"
            : "重庆高新开发建设投资集团有限公司中介机构抽取结果表"
        }}
      </caption>
      <tr>
        <td
          colspan="3"
          style="text-align: left"
          height="40px"
          class="font-FangSong topfont noBorder title-font"
        >
          申请单位：{{ form.createBy }}
        </td>
        <td
          colspan="2"
          style="text-align: right"
          class="topfont noBorder font-FangSong"
        >
          申请日期：{{ form.createTime && form.createTime.substr(0, 10) }}
        </td>
      </tr>
      <tr>
        <th rowspan="3" width="80px" class="bigfont">
          项 目 基
          <br />
          本 情 况
        </th>
        <td width="120px" height="60px" class="small font-SimHei">
          项 目 名 称
        </td>
        <th colspan="3" class="input commonBorder font-FangSong">
          {{ form.extractItem }}
        </th>
      </tr>
      <tr>
        <td class="small font-SimHei">建 设 地 址</td>
        <th colspan="3" class="input commonBorder font-FangSong">
          {{ form.extractAddress }}
        </th>
      </tr>
      <tr>
        <td class="small font-SimHei">
          工 程 费 用
          <br />
          (万 元)
        </td>
        <th width="150px" class="input font-FangSong">
          {{ form.extractPrice }}
        </th>
        <td width="80px" class="small font-SimHei">建 设 周 期</td>
        <th class="input commonBorder font-FangSong">
          {{ form.extractPeriod }}
        </th>
      </tr>
      <tr>
        <th
          :rowspan="5+items.length-1"
          class="bigfont"
        >
          中 标<br />信 息
        </th>
        <td class="small font-SimHei">抽 取 库</td>
        <th class="input font-FangSong">{{ form.unitTypeName }}</th>
        <td class="small font-SimHei">暂定中介服务费（万元）</td>
        <th colspan="3" class="input commonBorder font-FangSong">
          {{ form.maxPrice }}
        </th>
      </tr>
      <tr v-if="form.unitTypeName !== '施工单位'">
        <td class="small font-SimHei">业 务 类 型</td>
        <th class="input font-FangSong">{{ form.extractBusinessType }}</th>
        <td class="small font-SimHei">抽 取 时 间</td>
        <th class="input commonBorder font-FangSong">
          {{ form.updateTime && form.updateTime.substr(0, 10) }}
        </th>
      </tr>
      <tr>
        <td colspan="4" height="60px" class="small commonBorder font-SimHei">
          中 标 单 位 列 表
        </td>
      </tr>
      <tr>
        <td height="60px" class="small font-SimHei">序 号</td>
        <td class="small font-SimHei">单 位 名 称</td>
        <td width="120px" class="small font-SimHei">联 系 人</td>
        <td width="120px" class="small commonBorder font-SimHei">
          联 系 电 话
        </td>
      </tr>
      <tr v-if="items && items.length < 1">
        <th height="60px"></th>
        <th></th>
        <th></th>
        <th class="commonBorder"></th>
      </tr>
      <tr v-for="(item, index) in items" :key="item.id">
        <th height="60px" class="input font-FangSong">{{ index + 1 }}</th>
        <th class="input font-FangSong">{{ item.randomUnitName }}</th>
        <th class="input font-FangSong">{{ item.randomLinkman }}</th>
        <th class="input commonBorder font-FangSong">
          {{ item.randomPhone }}
        </th>
      </tr>
      <tr>
        <th rowspan="4" class="bigfont a1">
          参 与 抽
          <br />
          取 人 员
        </th>
        <td class="small font-SimHei">抽 取 地 点</td>
        <th class="input commonBorder font-FangSong" colspan="3">
          {{ form.extractPlace }}
        </th>
      </tr>
      <tr>
        <td class="small font-SimHei">现 场 抽 取 人</td>
        <th colspan="3" class="input commonBorder font-FangSong">
          {{ form.extractUser }}
        </th>
      </tr>
      <tr>
        <td rowspan="2" class="small a1 font-SimHei">
          纪 检 监 察
          <br />
          人 员
        </td>
        <th
          colspan="3"
          rowspan="2"
          class="input commonBorder a1 font-FangSong"
        ></th>
      </tr>
    </table>

    <el-button
      v-print="'#printMe'"
      type="primary"
      style="margin-top: 10px; margin-left: 90%"
      >打 印</el-button
    >
  </el-dialog>
</template>

<script>
export default {
    props: ["printVisible", "form", "items"],
    computed: {
        visible: {
            get() {
                return this.printVisible;
            },
            set(value) {
                this.$emit("update:printVisible", value)
            }
        }
    }
};
</script>

<style scoped lang="scss">
.topfont {
  font-size: 16px;
  font-weight: 400;
}
.small {
  text-align: center;
  font-weight: 100;
  font-size: 16px;
}
.bigfont {
  font-size: 18px;
  font-weight: 100;
  text-align: center;
  font-family: FangSong;
}
.input {
  font-size: 16px;
  font-weight: 400;
}
.printTable {
  border: unset;
}
.noBorder {
  border: unset;
}
.commonBorder {
  border-right: 1px solid #9a9a9a;
}
.a1 {
  border-bottom: 1px solid #9a9a9a;
}
.title-font {
  font-family: FangSong;
}
.font-SimHei {
  font-family: FangSong;
}
.font-FangSong {
  font-family: FangSong;
}
</style>